import 'package:flutter/material.dart';


///
///  DecoratedBox
/// 可以在其子组件绘制前(或后)绘制一些装饰（Decoration），如背景、边框、渐变等。
/// https://api.flutter-io.cn/flutter/widgets/DecoratedBox-class.html
///
/// 通常与BoxDecoration一起使用
/// https://api.flutter-io.cn/flutter/painting/BoxDecoration-class.html
///
class DecoratedBoxPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("DecoratedBox"),
      ),
      body: getBox03(),
    );

  }

}

getBox01() {

  return Center(
      child:  DecoratedBox(
        // 添加背景绘制
          decoration: BoxDecoration(
            color: Colors.blue,
            borderRadius: BorderRadius.circular(5),
          ),
        position: DecorationPosition.background,
        child: Container(
          margin: EdgeInsets.all(20),
          color: Colors.red,
        ),

      ),
  );

}


getBox02() {

  return Center(
    child:  GestureDetector(
      onTap: (){

      },
      child: DecoratedBox(
        decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.red,Colors.orange.shade800,],
            ),
            borderRadius: BorderRadius.circular(3.0),
            boxShadow: [
              BoxShadow(
                  color: Colors.black54,
                  offset: Offset(2.0, 2.0),
                  blurRadius: 4.0
              )
            ]
        ),
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 80.0,vertical: 18.0),
          child: Text("Login",style: TextStyle(color: Colors.white),),
        ),

      ),
    ),
  );

}


getBox03() {

  return Center(
    child:Container(
      width: 300,
      height: 300,
      decoration: BoxDecoration(
        color: const Color(0xff7c94b6),
        image: const DecorationImage(
          image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
          fit: BoxFit.cover,
        ),
        border: Border.all(
          width: 8,
        ),
        borderRadius: BorderRadius.circular(12),
      ),
      child: Padding(
        padding: EdgeInsets.all(20),
        child: Container(
          color: Colors.orange,
        ),
      ),
    ),
  );

}